var SearchBtnView = function () {
  var template = /*html*/ `
    <div class="search-btn-view clearfix">
      <div class="left-btns">
        <slot name="left"></slot>
      </div>
      <slot name="prepend"></slot>
      <template v-for="(searchBtn,index) in searchBtns">
      <el-button :key="'searchBtn_'+index" type="primary" :size="btnSize" @click="openSearch(index)">{{searchBtn}}</el-button>
      </template>
      <slot name="append"></slot>
      <div class="right-btns">
        <slot name="right"></slot>
      </div>

      <el-dialog :class="{'hide-dialog':isShowForm}" :title="searchBtns[searchIndex]+'条件'" :visible.sync="isShow" width="100%" top="0px" :show-close="false" custom-class="searchBtnDialog"
        :append-to-body="appendToBody" :modal="!isShowForm" @closed="dialogClosed" @open="dialogOpen">
        <div class="search-dialog-div">
          <slot name="search-content"></slot>
          <div v-if="hasSearchBtn" class="search-dialog-btns">
            <el-button type="primary" :size="btnSize" @click="searchClick">查询</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      btnText: {
        type: [String, Array],
        default: "查询"
      },
      btnSize: {
        type: String,
        default: "medium"
      },
      hasSearchBtn: {
        type: Boolean,
        default: true
      },
      beforeSearch: {
        type: Function,
        default: undefined
      },
      appendToBody: {
        type: Boolean,
        default: false
      },
      immediate:{
        type: Boolean,
        default: false
      }
    },
    provide() {
      return {
        btnView: this
      };
    },
    data: function () {
      var searchBtns = this.btnText;
      if (typeof searchBtns === 'string') {
        searchBtns = [searchBtns];
      }
      return {
        isShow: this.immediate,
        searchBtns: searchBtns,
        searchIndex: 0,
        isShowForm: this.immediate
      };
    },
    methods: {
      openSearch: function (index) {
        if (index === undefined) {
          index = 0;
        }
        this.$emit('before-open', index);
        this.searchIndex = index;
        this.isShow = true;
      },
      dialogOpen: function () {
        this.$emit('open', this.searchIndex);
      },
      dialogClosed: function () {
        if (this.isShowForm && this.immediate) {
          this.isShowForm = false;
        }
        this.$emit('closed', this.searchIndex);
      },
      searchClick: function () {
        var beforeSearch = this.beforeSearch;
        if (beforeSearch !== undefined) {
          if (!beforeSearch()) {
            return;
          }
        }

        this.isShow = false;
        this.$emit('search', this.searchIndex);
      }
    },
    template: template
  };
}();
